<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Optitrans : Mon compte </title>
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<link rel="shortcut icon" href="#" /> 
<link rel="bookmark icon" href="#" /> 
<link href="/static/css/main.css" rel="stylesheet" type="text/css">
<meta name="#" content="yes" /> 
<meta name="#" content="grey" /> 
<meta name="viewport" content="#" /> 
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/static/js/jquery.nivo.slider.js"></script>
<script src="/static/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="/static/js/twitter.js"></script>    
<script src="/static/js/jquery.isotope.min.js"></script>      
<script src="/static/js/custom.js"></script>    
<script>
	//// Start Simple Sliders ////
	$(function() {
		setInterval("rotateDiv()", 10000);
	});
		
		function rotateDiv() {
		var currentDiv=$("#simpleslider div.current");
		var nextDiv= currentDiv.next ();
		if (nextDiv.length ==0)
			nextDiv=$("#simpleslider div:first");
		
		currentDiv.removeClass('current').addClass('previous').fadeOut('2000');
		nextDiv.fadeIn('3000').addClass('current',function() {
			currentDiv.fadeOut('2000', function () {currentDiv.removeClass('previous');});
		});
	
	}
	//// End Simple Sliders //// 
</script> 
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>
<script>
    
jQuery(function($){
           
    // simple jQuery validation script
    $('#login').submit(function(){
        
        var valid = true;
        var errormsg = 'This field is required!';
        var errorcn = 'error';
        
        $('.' + errorcn, this).remove();            
        
        $('.required', this).each(function(){
            var parent = $(this).parent();
            if( $(this).val() == '' ){
                var msg = $(this).attr('title');
                msg = (msg != '') ? msg : errormsg;
                $('<span class="'+ errorcn +'">'+ msg +'</span>')
                    .appendTo(parent)
                    .fadeIn('fast')
                    .click(function(){ $(this).remove(); })
                valid = false;
            };
        });
        
        return valid;
    });
    
})
</script>
<style>

/* HTML elements  */        
 
    p, blockquote, ul, ol, dl, form, table, pre{line-height:inherit;margin:0 0 1.5em 0;}
    ul, ol, dl{padding:0;}
    ul ul, ul ol, ol ol, ol ul, dd{margin:0;}
    blockquote, dd{padding:0 0 0 2em;}
    pre, code, samp, kbd, var{font:100% mono-space,monospace;}
    pre{overflow:auto;}
    abbr, acronym{
        text-transform:uppercase;
        border-bottom:1px dotted #000;
        letter-spacing:1px;
        }
    abbr[title], acronym[title]{cursor:help;}
    small{font-size:.9em;}
    sup, sub{font-size:.8em;}
    em, cite, q{font-style:italic;}
    img{border:none;}           
    hr{display:none;}   
    table{width:100%;border-collapse:collapse;}
    th,caption{text-align:left;}
    form div{margin:.5em 0;clear:both;}
    label{display:block;}
    fieldset{margin:0;padding:0;border:none;}
    legend{font-weight:bold;}
    input[type="radio"],input[type="checkbox"], .radio, .checkbox{margin:0 .25em 0 0;}

/* //  HTML elements */ 

/* login form */    

#login{
    margin:5em auto;
    background:#fff;
    border:8px solid #eee;
    width:300px;
    min-height: 480px;
    margin-bottom: 60px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:0 0 10px #4e707c;
    -webkit-box-shadow:0 0 10px #4e707c;
    box-shadow:0 0 10px #4e707c;
    text-align:left;
    position:relative;
    }
#login a, #login a:visited{color:#0283b2;}
#login a:hover{color:#111;}
#login h1{
    background-image: url(images/header-bg.png);
    color:#000;
    text-shadow:#007dab 0 1px 0;
    font-size:30px;
    padding:25px 23px;
    margin:0 0 80px 0;
    border-bottom:1px solid #007dab;
    }
#login .register{
    position:absolute;
    float:left;
    margin:0;
    line-height:30px;
    top:-40px;
    right:0;
    font-size:11px;
    }
#login p{margin:.5em 25px;}
#login div{
    margin:18px 25px;
    background:#eee;
    padding:4px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    text-align:right;
    position:relative;
    }
#login label{
    float:left;
    line-height:30px;
    padding-left:1px;
    }
#login .field{
    border:1px solid #ccc;
    width:223.5px;
    font-size:20px;
    line-height:1em;
    padding:8px;
    -moz-box-shadow:inset 0 0 5px #ccc;
    -webkit-box-shadow:inset 0 0 5px #ccc;
    box-shadow:inset 0 0 5px #ccc;
    float: center;
    }   
#login div.submit{background:none;margin:-5px 0px 0px 133px;text-align:left;} 
#login div.submit label{float:none;display:inline;font-size:11px;}  
/*#login button{
    border:0;
    padding:0 30px;
    height:30px;
    line-height:30px;
    text-align:center;
    font-size:12px;
    color:#fff;
    text-shadow:#007dab 0 1px 0;
    background:#da620b;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
    border-radius:50px;
    cursor:pointer;
    }*/
#login button:link.blackbutton, a:visited.blackbutton{
    border:1px solid #000;
    background: #000;
    background: -moz-linear-gradient(top, #3f3f3f, #000);
    background: -webkit-gradient(linear,left top, left bottom, from(#3f3f3f), to(#000));
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#3f3f3f', EndColorStr='#000', GradientType=0);
    color:#fff;
    text-shadow:none !important;
}

#login button:hover.blackbutton{
    border:1px solid #000;
    background: #7c7c7c;
    background: -moz-linear-gradient(top, #7c7c7c, #000);
    background: -webkit-gradient(linear,left top, left bottom, from(#7c7c7c), to(#000));
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#7c7c7c', EndColorStr='#000', GradientType=0);
    color:#fff;
    text-shadow:none !important;
}  
#login .forgot{text-align:right;font-size:11px;}
#login .back{padding:1em 0;border-top:1px solid #eee;text-align:right;font-size:11px;}
#login .error{
    float:left;
    position:absolute;
    left:95%;
    top:-5px;
    background:#890000;
    padding:5px 10px;   
    font-size:11px;
    color:#fff;
    text-shadow:#500 0 1px 0;
    text-align:left;
    white-space:nowrap;
    border:1px solid #500;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:0 0 5px #700;
    -webkit-box-shadow:0 0 5px #700;
    box-shadow:0 0 5px #700;
    }


/* //  login form */    
        
</style>
</head>

<body>
<div id="header">
    	<!-- Start navigation area -->
        <div id="navigation">

        	<div id="navigation_wrap">
                <!-- Start Date et Heure area -->
                <div id="time"><a href="accueil.html"><img src="/static/images/logo.png" width="200" height="80" ></a></div>
                <!-- End contact info area -->
                <!-- Start navigation -->
                <div id="navi1">
                    <ul>
                    <a href="/optitrans/logout?next={{request.path}}" class="redbutton mediumrectange" style="width:250px;font-size:17px;padding:10px 28px 10px 28px; margin-right:0px">Déconnecter</a>        
                    </ul>
                </div>
                <!-- End navigation -->
			</div>
        </div>
        <!-- End navigation area -->
        <div class="clear"></div>
        <!-- Start Social & Logo area -->
</div>
<div id="main">
    <!-- Start Main Body Wrap -->
    <div id="main-wrap">
    <!-- Start Slider Wrapping -->
    <div id="sliderwrap1">
        <!-- Start Slider -->
        <div class="presentation1">
        <h2>Mon Compte </h2>
        <h5>Nom : </h5>
        <h5>Prénom(s) : </h5>
        <h5>Adresse :</h5>
        <h5>Téléphone : </h5>
        <h5>Email :</h5>
        <h5>Mot de passe : <input type="password" value="password"></h5>
        <a href="#" class="whitebutton smallrounded" style="font-size:13px;padding:5px 10px 5px 10px; float:right;">Modifier</a></br>

        <h2>Mes Abonnements</h2>
        <h5>Mes abonnements ...</h5></br>

        <h2>Mes Factures</h2>
        <h5>Liste des Factures</h5>
        <a href="#" class="greenbutton smallrounded" style="font-size:13px;padding:5px 10px 5px 10px; float:right;">Exporter</a></br>
    </div>
        <!-- End Slider HTML Captions -->
    </div>
    <!-- End Slider Wrapping -->
</div>
</div>
    <div class="clear"></div></br></br>
<!-- Start Footer -->
<div id="footer">
    <div class="clear"></div>
    <!-- Start Footer Bottom -->
    <div id="footerbottom">
        <div class="footerwrap">       
            <!-- Start Copyright Div -->
            <div id="copyright">Copyright &copy; 2013.&nbsp;&nbsp;&nbsp;
                <a href="#"><b>Conditions D'utilisations</a>&nbsp;&nbsp;&nbsp;
                <a href="#">Régles des Confidentialité</a>&nbsp;&nbsp;&nbsp;
                <a href="#">Aide</a></b></div>
            <!-- End Copyright Div -->

            <!-- Start Social area -->
            <div class="socialfooter">
                <div class="langues">
                    <select name="langues" id="langues" style="width:150px">
                          <option value="0" selected="selected">Français (France)</option>
                          <option value="1" >English (UK)</option> 
                     </select> 
                </div>               
            </div>
            <!-- End Socialarea -->
        
        </div>
    
    </div>
    <!-- End Footer Bottom -->
</div>
<!-- End Footer -->
<!-- Start Scroll To Top Div -->
<div id="scrolltab"></div>
<!-- End Scroll To Top Div -->
</body>
</html>